<template>
	<view class="root-container">
		<view class="button-container">
			<view class="row">
				<button :class="['btn-left',selected==='person'?'selected':'']" @tap="chooseToPerson()">找人</button>
				<button :class="['btn-right',selected==='group'?'selected':'']" @tap="chooseToGroup()">找群</button>
			</view>
		</view>
		
		<view class="input-container">
			<view class="key-container">
				<input class="input-key" v-model="key_word" :placeholder="selected=='person'?'输入D id或者用户昵称':'输入群id或群名称'" />
			</view>
			<button class="submit-btn" @tap="search()">确定</button>
		</view>
		
		
		<view v-show="selected=='person'" class="item">
			<view class="container" v-for="(person,index) in people" :key="person.id" @tap="toPersonInfo(index)">
				<view class="avatar-container">
					<image class="avatar"  :src="person.avatar"></image>
				</view>
				<view class="content">
					<text class="name">{{person.nickname}}</text>
					<text class="preview">{{'D id: '+person.loginId}}</text>
				</view>
			</view>
		</view>
		
		<view v-show="selected=='group'" class="item">
			<view class="container" v-for="(group,index) in groups" :key="group.id" @tap="toGroupInfo(index)">
				<view class="avatar-container">
					<image class="avatar"  :src="group.avatar"></image>
				</view>
				<view class="content">
					<text class="name">{{group.name}}</text>
					<text class="preview">{{'群 id: '+group.id}}</text>
				</view>
			</view>
		</view>
		
		
		
		<view class="result-container"></view>
	</view>
</template>

<script>
	import $store from '@/store/index.js';
	import { findPeople,findGroup } from 'api/user';
	export default {
		data() {
			return {
				key_word:'',
				selected: 'person',
				people:[],
				groups:[],
			}
		},
		onLoad(){
			this.key_word = this.$store.state.keyword;
			this.people = this.$store.state.searchPeople;
			this.groups = this.$store.state.searchGroups;
		},
		methods: {
			chooseToPerson(){
				this.selected = 'person';
			},
			chooseToGroup(){
				this.selected = 'group';
			},
			toPersonInfo(index){
				uni.navigateTo({
					url:'info?index='+index
				})
			},
			toGroupInfo(index){
				uni.navigateTo({
					url:'groupInfo?index='+index
				})
			},
			async search(){
				if(this.key_word!=''){
					this.$store.state.keyword = this.key_word;
					if(this.selected=='person')
					{
						const { content: res } = await findPeople({
						   keyword:this.key_word
						});
						if(res==''||res.length==0){
							uni.showToast({
								title:'没有搜索结果',
								icon:'none'
							})
						}
						this.people = res;
						this.$store.state.searchPeople = res;
					}else{
						const { content: res } = await findGroup({
						   keyword:this.key_word
						});
						if(res==''||res.length==0){
							uni.showToast({
								title:'没有搜索结果',
								icon:'none'
							})
						}
						this.groups = res;
						this.$store.state.searchGroups = res;
					}
				}
			}
		}
	}
</script>

<style scoped>
	.preview{
		margin-bottom: 0;
		font-size: smaller;
	}
	.selected{
		background-color: #01B4FE;
	}
	.button-container{
		
	}
	.row{
		margin-top: 50rpx;
		margin-bottom: 30rpx;
		display: flex;
		
	}
	.btn-left{
		margin-right: 0;
	}
	.btn-left:hover{
		background-color: #007AFF;
	}
	.btn-right{
		margin-left: 0;
	}
	.btn-right:hover{
		background-color: #007AFF;
	}
	.input-container{
		display: flex;
		padding: 10rpx;
	
	}
	.input-key{
		border-radius: 10rpx;
		border: #b6b6b6 solid;
		font-weight: 400;

		width: 120%;
		color: #000000;
		margin: 0;
	}
	.key-container{
		margin: auto;
	
	}
	.submit-btn{
		background-color: #4CD964;
		color: white;
	}
	
	.arrow{
		margin-top: auto;
		margin-bottom: auto;
		color: #8F8F94;
		margin-right: 5rpx;
		margin-left: 20rpx;
		font-weight: 600;
	}
	.divider{
		margin-top: 10rpx;
		padding-left: 20rpx;
		background-color: #c5c3c4;
		border-radius: 10rpx;
	}
	.divider-text{
		font-size: smaller;
	}
	.item{
		border-radius: 15rpx;
		/* background-color: rgb(200,199,204); */
	}
	.item :hover{
		border-radius: 15rpx;
		background-color: rgb(200,199,204); 
	}
	.container{
		border-radius: 20rpx;
		margin-left: 20rpx;
		margin-right: 40rpx;
		border-radius: 30rpx;
		width: 100%;
		display: flex;
		margin-top: 10rpx;
		background-color: #e1e1e1;
	}
	
	.avatar-container{
		position: relative;
		margin: 10rpx;
	}
	.avatar{
		width: 110rpx;
		height: 110rpx;
		border-radius: 50%;
	}
	.content{
		display: flex;
		align-items: auto;
		flex-direction: column;
		justify-content: center;
		padding-left: 10rpx;
	}
	.name{
		text-align: left;
		margin-top: 0;
		font-weight: 1000;
		font-size: large;
	}
</style>
